<template>
  <div class="py-2 w-full mx-auto" id="div-1">
    <a-flex vertical align="center" id="a-flex-1" class="w-full">
      <a-typography-link href="#" class="px-40" id="a-typography-link-1">
        <a-image src="https://picsum.photos/id/1/1500/624" :preview="false" id="a-image-1" />
      </a-typography-link>
      <a-row class="flex justify-center mt-[-50px] z-10 bg-[#ffffff] shadow-md py-4" id="a-row-1">
        <a-col class="flex-1 flex flex-col px-10" v-for="(item, index) in list1" :key="index" :id="`a-col-${index + 1}`">
          <a-typography-link href="#" class="!text-[#EE5C25] font-bold text-[22px] mb-2" :id="`a-typography-link-${index + 2}`">{{
            item.title
          }}</a-typography-link>
          <div class="flex flex-col relative" :id="`div-${index + 2}`">
            <a-typography-link href="#" class="!text-[#000000] font-bold text-[16px] mb-2" :id="`a-typography-link-${index + 5}`">{{
              item.subTitel
            }}</a-typography-link>
            <a-typography-link
              href="#"
              class="!text-[#999] mb-1"
              v-for="(subItem, idx) in item.list"
              :key="idx"
              :id="`a-typography-link-${index * 3 + idx + 8}`"
              >{{ subItem.title }}</a-typography-link
            >
            <a-divider
              type="vertical"
              v-if="index < list1.length - 1"
              class="bg-[#E3E4E5] absolute h-full bottom-6 -right-14"
              :id="`a-divider-${index + 1}`"
            />
          </div>
        </a-col>
      </a-row>
      <a-flex justify="center" gap="80" class="mt-[40px] text-[#ffffff] w-full px-40" id="a-flex-2">
        <a-typography-link
          href="#"
          class="bg-gradient-to-r from-[#F05F2A] to-[#F79C7A] !text-[#ffffff] shadow-md px-20 py-[40px] text-[22px] rounded-[4px]"
          id="a-typography-link-17"
          ><CodeFilled class="mr-2" id="code-filled-1" />高校信息库</a-typography-link
        >
        <a-typography-link
          href="#"
          class="bg-gradient-to-r from-[#F05F2A] to-[#F79C7A] !text-[#ffffff] shadow-md px-20 py-[40px] text-[22px] rounded-[4px]"
          id="a-typography-link-18"
          ><SnippetsFilled class="mr-2" id="snippets-filled-1" />高校专业库</a-typography-link
        >
        <a-typography-link
          href="#"
          class="bg-gradient-to-r from-[#F05F2A] to-[#F79C7A] !text-[#ffffff] shadow-md px-20 py-[40px] text-[22px] rounded-[4px]"
          id="a-typography-link-19"
          ><EditFilled class="mr-2" id="edit-filled-1" />高校中学库</a-typography-link
        >
      </a-flex>
      <a-typography-paragraph class="mt-[50px] text-[#ffffff] w-full px-40" id="a-typography-paragraph-1">
        <a-flex justify="center" id="a-flex-3" gap="20">
          <a-typography-link href="#" :id="`a-typography-link-${20 + index}`" v-for="(item, index) in list2" :key="index">
            <a-image :src="item.img" :preview="false" class="aspect-[20/10]" :id="`a-image-${2 + index}`" />
          </a-typography-link>
        </a-flex>
        <a-flex class="mt-1" id="a-flex-4" gap="20">
          <a-typography-text :id="`a-typography-text-${1 + index}`" v-for="(item, index) in list3" :key="index">
            {{ item.title }}
          </a-typography-text>
        </a-flex>
      </a-typography-paragraph>
      <a-typography-paragraph class="w-full mt-20" id="a-typography-paragraph-2">
        <a-row class="flex items-center" id="a-row-2">
          <a-col class="flex-1 flex items-center justify-center" id="a-col-4">
            <a-divider class="bg-[#EE5C25]" id="a-divider-4" />
          </a-col>
          <a-col :span="1.5" class="flex items-center justify-center" id="a-col-5">
            <a-typography-text
              class="w-[20px] h-[20px] bg-[radial-gradient(circle_at_center,#EE5C25_0%,transparent_100%)] rounded-full"
              id="a-typography-text-10"
            />
          </a-col>
          <a-col :span="5" class="flex items-center justify-center" id="a-col-6">
            <a-typography-text class="font-bold text-[30px] text-[#EE5C25] px-20" id="a-typography-text-11">教育聚焦</a-typography-text>
          </a-col>
          <a-col :span="1.5" class="flex items-center justify-center" id="a-col-7">
            <a-typography-text
              class="w-[20px] h-[20px] bg-[radial-gradient(circle_at_center,#EE5C25_0%,transparent_100%)] rounded-full"
              id="a-typography-text-12"
            />
          </a-col>
          <a-col class="flex-1 flex items-center justify-center" id="a-col-8">
            <a-divider class="bg-[#EE5C25]" id="a-divider-5" />
          </a-col>
        </a-row>
        <a-flex align="center" justify="center" id="a-flex-5" class="mt-[40px] px-40">
          <a-typography-paragraph class="px-1 w-[36px] h-[36px] text-white text-[12px] bg-[#EE5C25] mr-6" id="a-typography-paragraph-3">
            高校名单
          </a-typography-paragraph>
          <a-typography-link href="#" id="a-typography-link-26">
            <a-typography-text class="!text-[#EE5C25]" id="a-typography-text-13">京</a-typography-text>
            <a-divider type="vertical" class="bg-[#333333]" id="a-divider-6" />
          </a-typography-link>
          <a-typography-link
            href="#"
            v-for="(item, index) in list4"
            :key="index"
            class="!text-[#333333]"
            :id="`a-typography-link-${27 + index}`"
          >
            <a-typography-text :id="`a-typography-text-${14 + index}`">{{ item }}</a-typography-text>
            <a-divider type="vertical" class="bg-[#333333]" :id="`a-divider-${7 + index}`" />
          </a-typography-link>
        </a-flex>
        <a-row class="flex mt-[60px] px-40" :gutter="40" id="a-row-3">
          <a-col :span="10" id="a-col-9">
            <a-flex justify="space-between" id="a-flex-6">
              <a-typography-text class="block flex-1 text-[22px] text-[#EE5B25] font-bold" id="a-typography-text-42"
                >校园视频</a-typography-text
              >
              <AppstoreFilled id="appstore-filled-1" class="text-[#e5e5e5] text-[22px]" />
            </a-flex>
            <a-flex justify="space-between" class="mt-2" gap="10" id="a-flex-7">
              <a-typography-paragraph class="flex flex-col" id="a-typography-paragraph-4">
                <a-typography-link href="#" id="a-typography-link-55">
                  <a-image src="https://picsum.photos/id/8/320/210" :preview="false" class="aspect-[20/10]" id="a-image-8" />
                </a-typography-link>
                <a-typography-text class="mt-[16px] text-center" id="a-typography-text-43"
                  >梦开始的地方--铜仁幼儿师范高等</a-typography-text
                >
              </a-typography-paragraph>
              <a-typography-paragraph class="flex flex-col" id="a-typography-paragraph-5">
                <a-typography-link href="#" id="a-typography-link-56">
                  <a-image src="https://picsum.photos/id/9/320/210" :preview="false" class="aspect-[20/10]" id="a-image-9" />
                </a-typography-link>
                <a-typography-text class="mt-[16px] text-center" id="a-typography-text-44"
                  >生命为贵 至诚为医--贵州医科大学</a-typography-text
                >
              </a-typography-paragraph>
            </a-flex>
            <a-flex justify="space-between" gap="10" id="a-flex-8">
              <a-typography-paragraph class="flex flex-col" id="a-typography-paragraph-6">
                <a-typography-link href="#" id="a-typography-link-57">
                  <a-image src="https://picsum.photos/id/9/320/210" :preview="false" class="aspect-[20/10]" id="a-image-10" />
                </a-typography-link>
                <a-typography-text class="mt-[16px] text-center" id="a-typography-text-45">陇东学院2024招生宣传片</a-typography-text>
              </a-typography-paragraph>
              <a-typography-paragraph class="flex flex-col" id="a-typography-paragraph-7">
                <a-typography-link href="#" id="a-typography-link-58">
                  <a-image src="https://picsum.photos/id/10/320/210" :preview="false" class="aspect-[20/10]" id="a-image-11" />
                </a-typography-link>
                <a-typography-text class="mt-[16px] text-center" id="a-typography-text-46">2024遇见川农|四川农业大学</a-typography-text>
              </a-typography-paragraph>
            </a-flex>
          </a-col>
          <a-col class="flex-1" id="a-col-10">
            <a-tabs type="card" class="overflow-hidden h-full bg-[#F1F2F3]" id="a-tabs-1">
              <template #renderTabBar>
                <a-flex class="bg-[#e4e4e4] mb-4" align="center" id="a-flex-9">
                  <a-typography-text
                    class="px-2 py-2 text-center font-bold bg-[#E7E8E9] text-[18px] text-[#999] w-[50%]"
                    id="a-typography-text-47"
                  >
                    最新热点
                  </a-typography-text>
                  <a-typography-text
                    class="px-2 py-2 text-center font-bold bg-[#EE5B25] text-[18px] w-[50%] text-[#fff] w-[40%] text-xl"
                    id="a-typography-text-48"
                  >
                    校园人物
                  </a-typography-text>
                </a-flex>
              </template>
              <a-tab-pane id="a-tab-pane-1">
                <a-list class="px-6" id="a-list-1">
                  <a-list-item v-for="(item, index) in list5" :key="index" class="!px-1" :id="`a-list-item-${index + 1}`">
                    <a-typography-link href="#" class="!text-[#999] line-clamp-1 py-1" :id="`a-typography-link-${59 + index}`">
                      <a-badge color="#EE5B25" :id="`a-badge-${index + 1}`" />
                      <a-typography-text :id="`a-typography-text-${49 + index}`">
                        {{ item.title }}
                      </a-typography-text>
                    </a-typography-link>
                  </a-list-item>
                </a-list>
              </a-tab-pane>
            </a-tabs>
          </a-col>
        </a-row>
        <a-flex justify="center" :gap="10" class="mt-10 px-40" id="a-flex-10">
          <a-typography-link href="#" v-for="(item, index) in list6" :key="index" :id="`a-typography-link-${67 + index}`">
            <a-image :src="item.img" :preview="false" class="aspect-[20/10]" :id="`a-image-${12 + index}`" />
          </a-typography-link>
        </a-flex>
      </a-typography-paragraph>
    </a-flex>
  </div>
</template>

<script setup>
  const list1 = [
    {
      title: '教育视点',
      subTitel: '教育部职业教育与成人教育司负责',
      list: [
        { title: '758项新版职业教育专业教学标准发布' },
        { title: '教育部修订《中小学生学籍管理办法》' },
        { title: '教育部印发工作指南 推动中小学科学教育走' },
      ],
    },
    {
      title: '最新热点',
      subTitel: '揭晓!北京农业职业学院2024年度',
      list: [
        { title: '合肥职业技术学院2024年十大新闻事件回顾' },
        { title: '重庆安全技术职业学院2024年十大新闻!' },
        { title: '大连理工大学-流本科建设工作2024年终盘' },
      ],
    },
    {
      title: '校庆',
      subTitel: '安徽理工大学召开80周年校庆筹筹会',
      list: [
        { title: '安徽理工大学召开80周年校庆筹备工作领导会' },
        { title: '71岁生日快乐!浙江水利水电学院开展丰' },
        { title: '热烈庆祝安徽理工大学建校79周年' },
      ],
    },
  ];
  const list2 = [
    {
      img: 'https://picsum.photos/id/2/240/84',
    },
    {
      img: 'https://picsum.photos/id/3/240/84',
    },
    {
      img: 'https://picsum.photos/id/4/240/84',
    },
    {
      img: 'https://picsum.photos/id/5/240/84',
    },
    {
      img: 'https://picsum.photos/id/6/240/84',
    },
    {
      img: 'https://picsum.photos/id/7/240/84',
    },
  ];
  const list3 = [
    { title: '教师节' },
    { title: '国家示范性高职院校' },
    { title: '国家骨干职校' },
    { title: '双高院校' },
    { title: '国家重点学科' },
    { title: '2024年高校名单' },
    { title: '党史学习教育' },
    { title: '开展主题教育，高校在行动' },
    { title: '开学典礼' },
  ];
  const list4 = [
    '津',
    '沪',
    '渝',
    '辽',
    '苏',
    '浙',
    '皖',
    '闽',
    '粵',
    '赣',
    '鲁',
    '湘',
    '鄂',
    '川',
    '陕',
    '宁',
    '琼',
    '翼',
    '晋',
    '蒙',
    '黑',
    '吉',
    '豫',
    '滇',
    '黔',
    '桂',
    '甘',
    '青',
  ];
  const list5 = [
    { title: '温开良师说|有事就找曹老师' },
    { title: '【师者如光】大连理工大学王建军:以数据科学为舟，引领学子扬帆远航' },
    { title: '【就业榜样】大连理工大学韩筱:筑梦蓝天的种子在大工生根发芽' },
    { title: '【师者如光】大连理工大学史彦涛:立德树人，做科研与教育并重的领航者' },
    { title: '【就业榜样】大连理工大学姜佳明:投身东北全面振兴 展宏图之志' },
    { title: '【多彩医药】云南医药健康职业学院优秀教师:育医学检验英才，践因材施' },
    { title: '【师者如光】大连理工大学边继明:燃灯筑梦 照亮学子前行路' },
    { title: '【就业榜样】大连理工大学尚尔真:我非常希望到基层去' },
  ];
  const list6 = [
    {
      img: 'https://picsum.photos/id/11/294/50',
    },
    {
      img: 'https://picsum.photos/id/12/294/50',
    },
    {
      img: 'https://picsum.photos/id/13/294/50',
    },
    {
      img: 'https://picsum.photos/id/14/294/50',
    },
    {
      img: 'https://picsum.photos/id/15/294/50',
    },
  ];
</script>
<style scoped></style>
